/*
    * @module: views/home/dailyAnalysisReport
    * @author: zengfx
    * @date: 2020-12-11
*/
<template>
  <div class="dailyAnalysisReport_container" v-loading="showAllLoading">
    <header>
      <p>日分析报表</p>
      <el-button size="mini" @click="handle_back">返回</el-button>
    </header>
    <main>
        <el-form :inline="true" :model="formInline" class="main_searchBar">
            <el-form-item label="区域:">
                <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
            </el-form-item>
            <el-form-item label="选择日期">
                 <el-date-picker
                                    v-model="formInline.period"
                                    size="mini"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                ></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="开始日期:">
                <el-date-picker size="mini" v-model="formInline.startDate" value-format="yyyyMMDD" type="date" placeholder="选择日期" ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期:">
                <el-date-picker size="mini" v-model="formInline.endDate" value-format="yyyyMMDD" type="date" placeholder="选择日期" ></el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button size="mini" id="search_btn" @click="getData(1)">查询</el-button>
            </el-form-item>
        </el-form>

        <div>
            <div class="chartList">
                <div v-for="(item,index) in chartList" :key="index">
                    <div :class="'chart' + index" style="height:350px; width: 50%;float:left" ></div>
                </div>
            </div>
        </div>
    </main>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
export default {
    data() {
        return {
            chartList: [1, 2, 3, 4],
            showAllLoading: false,
            formInline: {
                areaId: '',
                period: [],
                startDate: '',
                endDate: ''
            },
            areaIds: [],
            areaNames: [],
            areaList: [],
            disabledTime: ''
        };
    },
    mounted() {
        var that = this;

        that.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        that.formInline.areaId = that.accountInfo.areaId;

        var d = new Date();
        d = d.setDate(d.getDate() - 1);
        d = new Date(d);
        var endTime = that.timeYYYYMMDD(d);
        that.formInline.period = [new Date('2019-01-01'), new Date(endTime)];

        that.getData();
    },
    methods: {
        handle_back() {
            this.$router.go(-1);
        },
        myDate() {
            var myDate = new Date() // 获取今天日期
            myDate.setDate(myDate.getDate() - 1)
            var date = new Date(myDate);
            var YY = date.getFullYear() + '/';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            this.formInline.endDate=  YY + MM + DD;
        },
        timeYYYYMMDD(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h=h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            var second=date.getSeconds();
            second=second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d;
        },
        created() {
            // this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
            // this.formInline.areaId = this.accountInfo.areaId;
            // // this.formInline.areaName = this.accountInfo.areaName;
            // this.getMonth();
        },
        dataZoomFun(params) {
            var that = this;
            // console.log(params)
            that.myChartTop[+params.dataZoomId].dispatchAction({
                type: 'dataZoom',
                start: params.start,
                end: params.end,
                startValue: params.startValue,
                endValue: params.endValue
            });
        },
        chart1(timeData, numberData) {
            let myChart = this.$echarts.init(document.querySelector('.chart0'));
            let option = {
                title: {
                    text: '移动活跃',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                legend: {
                    data: ['移动活跃'],
                    left: 10
                },
                axisPointer: {
                    link: { xAxisIndex: 'all' }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true
                        // start: 30,
                        // end: 100
                        // xAxisIndex: [0, 1]
                    }
                ],
                grid: [
                    {
                        left: '10%',
                        right: '10%',
                        height: '65%'
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: { onZero: true },
                        data: timeData
                    }
                ],
                yAxis: [
                    {
                        name: null,
                        type: 'value'
                        // max: 500
                    }
                ],
                series: [
                    {
                        name: null,
                        type: 'line',
                        symbolSize: 8,
                        hoverAnimation: false,
                        data: numberData
                    }
                ]
            };
            myChart.setOption(option);
        },
        chart2(timeData, numberData1, numberData2) {
            let myChart = this.$echarts.init(document.querySelector('.chart1'));
            let option = {
                title: {
                    text: "宽带活跃/到达"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['累计活跃数', '宽带到达']
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true
                        // start: 30,
                        // end: 100
                        // xAxisIndex: [0, 1]
                    }
                ],
                grid: {
                    left: '10%',
                    right: '10%',
                    height: '65%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: timeData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '累计活跃数',
                        type: 'line',
                        stack: '总量',
                        data: numberData1
                    },
                    {
                        name: '宽带到达',
                        type: 'line',
                        stack: '总量',
                        data: numberData2
                    }
                ]
            };

            myChart.setOption(option);
        },
        chart3(timeData, numberData) {
            let myChart = this.$echarts.init(document.querySelector('.chart2'));
            let option = {
                title: {
                    text: '日发展积分',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                legend: {
                    data: ['日发展积分'],
                    left: 10
                },
                axisPointer: {
                    link: { xAxisIndex: 'all' }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                        // xAxisIndex: [0, 1]
                    }
                ],
                grid: [
                    {
                        left: '10%',
                        right: '10%',
                        height: '65%'
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: { onZero: true },
                        data: timeData
                    }
                ],
                yAxis: [
                    {
                        name: null,
                        type: 'value'
                        // max: 500
                    }
                ],
                series: [
                    {
                        name: null,
                        type: 'line',
                        symbolSize: 8,
                        hoverAnimation: false,
                        data: numberData
                    }
                ]
            };
            myChart.setOption(option);
        },
        chart4(timeData, numberData) {
            let myChart = this.$echarts.init(document.querySelector('.chart3'));
            let option = {
                title: {
                    text: '码号级收入（万元）'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },
                grid: [
                    {
                        left: '10%',
                        right: '10%',
                        height: '65%'
                    }
                ],
                legend: {
                    data: ['码号级收入', '折线']
                },
                dataZoom: {
                    show: true
                    // start: 0,
                    // end: 100
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: timeData
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true
                        // name: '码号级收入',
                        // boundaryGap: [0.2, 0.2]
                    }
                ],
                series: [
                    {
                        name: '码号级收入',
                        type: 'bar',
                        data: numberData
                    },
                    {
                        name: '折线',
                        type: 'line',
                        data: numberData
                    }
                ]
            };
            myChart.setOption(option);
        },
        getData(type) {
            this.showAllLoading = true;
            $budgetAPI.dailyIndex(
                {
                    areaId: this.formInline.areaId,
                    startDate: type ? this.formInline.period[0] : this.timeYYYYMMDD(this.formInline.period[0]),
                    endDate: type ? this.formInline.period[1] : this.timeYYYYMMDD(this.formInline.period[1]),
                },
                res => {
                    if (res.code == 0) {
                        var content = res.content.data;
                        console.log(content.codeNumberIncomeDate, 'content.codeNumberIncomeDate');
                        console.log(content.codeNumberIncome, 'content.codeNumberIncome');
                        this.$nextTick(() => {
                            this.chart1(content.activeMovementDate, content.activeMovement);
                            this.chart2(content.cumulativeActiveDate, content.cumulativeActive, content.broadbandArrival);
                            this.chart3(content.developmentIntegralDate, content.developmentIntegral);
                            this.chart4(content.codeNumberIncomeDate, content.codeNumberIncome);
                        });
                    }
                    this.showAllLoading = false;
                },
                err => {
                    this.showAllLoading = false;
                }
            );


        }


    }
};
</script>

<style lang="scss" scoped>
.dailyAnalysisReport_container {
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        height: 83vh;
        overflow-y: auto;
        padding: 20px;
        & > ul {
            li {
                width: 100%;
                height: 500px;
                margin-bottom: 20px;
                display: flex;
                & > div {
                    flex: 1;
                }
            }
        }
    }
}
</style>
